<template>
  <div class="root-conents">
    <div class="root-conents-left">
      <MenuBar />
    </div>
    <div class="root-conents-center">
      <div class="root-conents-center-top">
        <TopBar />
      </div>
      <div class="root-conents-center-center">
        <!-- 二级路由 -->
        <router-view />
      </div>
      <div class="root-conents-center-bottom">
        <FooterBar />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import FooterBar from '@/components/layout/footer/index.vue'
import MenuBar from '@/components/layout/menu/index.vue'
import TopBar from '@/components/layout/top/index.vue'
</script>

<style lang="scss" scoped>
@import '../styles.scss';
.root-conents {
  @include whbai;
  display: flex;
  .root-conents-left {
    width: 210px;
    height: 100%;
  }
  .root-conents-center {
    width: calc(100vw - 210px);
    display: flex;
    flex-direction: column;
    .root-conents-center-top {
      height: 66px;
    }
    .root-conents-center-center {
      flex: 1;
    }
    .root-conents-center-bottom {
      height: 80px;
    }
  }
}
</style>
